<template>
<!-- 网络配置 -->
  <div class="network-root">
    <a-divider>service 端口</a-divider>
    <a-form class="port-form">
      <a-form-item label="外部端口:">
        <a-input
          :disabled="state.portDisabled"
          v-model:value="state.network.servicePort"
          spellcheck="false"
          placeholder="请输入外部端口"
          style="width: 150px; border-color: #1890ff; border-radius: 0;margin-right: 40px;"
        />
      </a-form-item>
      <a-form-item label="内部端口 :">
        <a-input
          :disabled="state.portDisabled"
          v-model:value="state.network.appPort"
          spellcheck="false"
          placeholder="请输入内部端口"
          style="width: 150px; border-color: #1890ff; border-radius: 0"
        />
      </a-form-item>
      <div class="portSave" style="margin-left: 20px" v-if="state.portDisabled">
        <a-button type="primary" @click="state.portDisabled = false" ghost
          >编辑</a-button
        >
      </div>
      <div class="portSave" style="margin-left: 20px" v-else>
        <a-button type="primary" @click="savePort" ghost>保存</a-button>
      </div>
    </a-form>
    <a-divider>外部服务路由</a-divider>
    <div class="route">
      <div class="route-button" style="margin-left: 20px">
        <a-button style="line-height: 26px;margin-right: 20px;" type="primary" @click="toAddReverseProxy" ghost>增加配置</a-button>
        <span>
          示例配置中, 外网请求地址 http://devcloud.msh.com/devcloud-api/project/get
          , 转发到该服务 /api/project/get
        </span>
      </div>
      <a-card
        v-if="state.addVisable"
        title="新增路由"
      >
        <template #extra>
          <a-button type="primary" ghost @click="state.addVisable = false" style="line-height: 26px;margin-right: 20px;">删除</a-button>
          <a-button type="primary" ghost @click="addReverseProxy" style="line-height: 26px">新增</a-button>
        </template>
        <a-form :ref="formRef"  :model="state.addForm">
          <a-form-item label="域名: " name="domainConfigId" :rules="[{ required: true, message: '请选择域名' }]">
            <div>
              <a-select
                  v-model:value="state.addForm.domainConfigId"
                  :options="state.domainConfigIdData"
                  :filter-option="false"
                  :fieldNames="state.domainConfigIdFieldNames"
              ></a-select>
            </div>
          </a-form-item>
          <a-form-item label="请求路径: ">
            <div>
              <a-input
                v-model:value="state.addForm.requestPath"
                spellcheck="false"
                style="min-width: 100%;margin-left: 20px;"
                placeholder="请输入请求路径"
              >
                <template #addonBefore>
                  <span>/</span>
                </template>
              </a-input>
              <a-popover title="示例">
                <template #content> devcloud-api<br /> </template>
                <QuestionCircleOutlined  class="tips"/>
              </a-popover>
            </div>
          </a-form-item>
          <a-form-item label="应用路径: ">
            <div>
              <a-input
                v-model:value="state.addForm.appPath"
                spellcheck="false"
                style="min-width: 100%;margin-left: 20px;"
                placeholder="请输入应用路径"
              >
                <template #addonBefore>
                  <span>/</span>
                </template></a-input
              >
              <a-popover title="示例">
                <template #content> api<br /> </template>
                <QuestionCircleOutlined class="tips"/>
              </a-popover>
            </div>
          </a-form-item>
        </a-form>
      </a-card>
      <a-card
        title="路由配置"
        v-for="(item, idx) in state.network.moduleReverseProxyList"
        :key="idx"
      >
        <template #extra>
          <a-popconfirm
            :visible="item.deleteVisible"
            title="您确定要删除制品吗？"
            ok-text="确定"
            cancel-text="取消"
            @confirm="removeReverseProxy(item.id)"
            @cancel="cancelRemoveReverseProxy(item)"
          />
          <a-button type="primary" ghost @click="toRmoveReverseProxy(item)">删除</a-button>
        </template>
        <div class="infobox">
          <div class="info">
            <span class="key">域名: </span>
            <span class="value">{{ item.domainConfigIdDesc }}</span>
          </div>
          <div class="info">
            <span class="key">请求路径: </span>
            <span class="value">{{ item.requestPath }}</span>
          </div>
          <div class="info">
            <span class="key">应用路径: </span>
            <span class="value">{{ item.appPath }}</span>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>



<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from "vue";
import { QuestionCircleOutlined } from "@ant-design/icons-vue";
import { domainConfigApi, moduleNetworkApi, moduleReverseProxyApi } from "@/api/devcloudApi";
import { message, FormInstance } from "ant-design-vue";

export default defineComponent({
  name: "network",
  components: {
    QuestionCircleOutlined,
  },
  props: {
    moduleId: {
      type: Number,
      required: false,
    },
  },
  setup(props) {
    const formRef = ref<FormInstance>();
    const { moduleId } = toRefs(props);
    const state = reactive({
      portDisabled: false,
      network: {
        id: "",
        moduleId: moduleId.value,
        reverseProxyList: [],
      },
      addVisable: false,
      addForm: {

      },
      domainConfigIdData: [],
      domainConfigIdFieldNames: {
        value: "id",
        label: "domain",
      },
    });

    const savePort = async () => {
      if (state.network.id) {
        const res = await moduleNetworkApi.update(state.network);
        if (res.success) {
          get();
          message.info("保存成功");
          state.portDisabled = true;
        }
      } else {
        const res = await moduleNetworkApi.insert(state.network);
        if (res.success) {
          get();
          message.info("保存成功");
          state.portDisabled = true;
        }
      }
    }


    const get = async () => {
      if (moduleId.value) {
        const res = await moduleNetworkApi.getByModuleId(moduleId.value);
        if (res.success && res.result) {
          state.network = res.result;
          if(res.result.appPort || res.result.servicePort){
            state.portDisabled= true
          }
        }
      }
    }

    const validataReverseProxyForm = async () => {
      try {
        const res = await formRef.value?.validateFields();
      } catch (error) {
        console.log(error);
        return false;
      }
      return true;
    }

    const initAddForm = () => {
      state.addForm = {
        moduleId: moduleId.value,
        requestPath: '',
        appPath: '',
        tslCert: ''
      }
    }

    const toAddReverseProxy = async () => {
      if (!state.network.id) {
        message.warn("必须先配置端口信息");
        return;
      }
      initAddForm()
      state.addVisable = true
    }

    const addReverseProxy = async () => {
      if(await !validataReverseProxyForm){
        return
      }
      const res = await moduleReverseProxyApi.insert(state.addForm)
      if(res.success){
        message.info("添加成功")
        get()
        state.addVisable = false
      }
    }

    const cancelRemoveReverseProxy = (item:any) => {
      item.deleteVisible=false
    }

    const toRmoveReverseProxy = (item:any) => {
      item.deleteVisible=true
    }

    const removeReverseProxy = async (reverseProxyId: string) => {
      const res = await moduleReverseProxyApi.delete(reverseProxyId)
      if(res.success){
        message.info("删除成功")
        get()
      }
    }
    
    const domainConfigIdList = async () => {
      const param = {}
      const res = await domainConfigApi.list(param)
      if (res.success) {
        state.domainConfigIdData = res.result
      }
    }

    const init = () =>{
      domainConfigIdList()
      get()
    }

    init()
    return {
      state,
      formRef,
      savePort,
      toAddReverseProxy,
      addReverseProxy,
      removeReverseProxy,
      cancelRemoveReverseProxy,
      toRmoveReverseProxy,
      domainConfigIdList
    }
  },
});
</script>

<style lang="less" scoped>
.network-root{
  border:1px solid #ddd;
  padding: 20px 40px  40px 40px;
  

}
.port-form {
  display: flex;
  justify-content: center;
}
.route{

  .route-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
  }
}

.tips{
  position: absolute;
  top: 10px;
  right: -45px;
}
.infobox{
  width: 80%;
  position: relative;
  top: 2%;
  left: 75%;
  transform: translate(-50%);
}
.info {
  display: flex;
}
.key{
  width: 100px;
}
</style>